<template>
  <div>
    <h3>{{cityname}}城市疫情分布图</h3>
    <div id="main" style="width: 7.5rem; height: 7rem"></div>
  </div>
</template>

<script>
export default {
  props: ['cityname'],
  data() {
    return {
      arr: [],
      citys: []
    }
  },
  mounted() {
    const that = this
    this.api.getChinaData().then(res => {
      const province = res.data.provinceArray // 34
      const arr = []

      for (const item of province) {
        for (const i of item.cityArray) {
          arr.push(i)
        }
      }
      for (let j = 0; j < arr.length; j++) {
        const obj = {}
        obj.name = arr[j].childStatistic + '市'
        obj.value = arr[j].totalConfirmed
        that.citys.push(obj)
      }
      console.log('我是城市', that.citys)

      // console.log('dassadsa', citys)
      // const city = []
      // for (let i = 1; i < citys.length; i++) {
      //   const obj = {}
      //   obj.name = citys[i].childStatistic + '市'
      //   obj.value = citys[i].totalConfirmed
      //   city.push(obj)
      // }
      // console.log('福建', city)
      that.$myChart.cityMap('main', that.cityname, that.citys)
    })
  }
}
</script>

<style lang="less" scoped>
h3 {
  text-align: center;
}
</style>
